<template>
	<div style="width: 100%; overflow: auto">
		<div :id="FieldItem?.tag + FieldItem?.formId" :style="pieStyle"></div>
	</div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts/core';
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { TablePageType, TabFieldType } from '/@/components/Linxyun/custom/DataStructs/commontype';

const props = withDefaults(
	defineProps<{
		pageInfo?: TablePageType;
		pageData?: any;
		inputData: Record<string, any>;
		globalData?: any;
		FieldItem: TabFieldType | null;
	}>(),
	{
		pageData: {},
		globalData: null,
		FieldItem: null,
	}
);
const { FieldItem, pageData } = toRefs(props);
echarts.use([TitleComponent, TooltipComponent, LegendComponent, PieChart, CanvasRenderer, LabelLayout]);

onMounted(() => {
	init();
});

// 数据发生变化重新渲染
watch(
	() => props.pageData[FieldItem.value?.options.tableData],
	() => {
		init();
	}
);
const init = () => {
	const dataList = props.pageData[FieldItem.value?.options.tableData];
	if (dataList) {
		FieldItem.value!.options.series[0].data = [];
		// 如果设置了分类枚举
		if (FieldItem.value?.options.classDefine.isFixed && FieldItem.value?.options.classDefine.options) {
			FieldItem.value?.options.classDefine.options.forEach((item: Record<string, any>, index: number) => {
				FieldItem.value?.options.series[0].data.push({});
				FieldItem.value!.options.series[0].data[index].name = item.label;
				const dataItem: Record<string, unknown> | undefined = dataList.find((d) => d[FieldItem.value?.options.classDefine.BindVar] === item.value);
				if (dataItem) {
					console.log('dataItem', dataItem);
					FieldItem.value!.options.series[0].data[index].value = Number(dataItem[FieldItem.value?.options.BindVar]);
				} else {
					FieldItem.value!.options.series[0].data[index].value = 0;
				}
			});
		} else {
			for (let i = 0; i < dataList.length; i++) {
				const data = dataList[i];
				FieldItem.value?.options.series[0].data.push({});
				FieldItem.value!.options.series[0].data[i].name = data[FieldItem.value?.options.classDefine.BindVar];
				FieldItem.value!.options.series[0].data[i].value = data[FieldItem.value?.options.BindVar];
			}
		}
	}
	console.log('[echarts] [Pie] [options]：', FieldItem.value?.options);
	const chartDom = document.getElementById(FieldItem.value?.tag + FieldItem.value?.formId)!;
	const myChart = echarts.init(chartDom);
	myChart.setOption(FieldItem.value!.options);
	window.addEventListener('resize', () => {
		if (chartDom.offsetWidth > 400 || chartDom.offsetHeight > 300) {
			myChart.resize();
		}
	});
};

const pieStyle = computed(() => {
	return {
		height: FieldItem.value?.options.height + 'px',
		paddingTop: FieldItem.value?.options.topPadding + 'px',
		paddingLeft: FieldItem.value?.options.leftPadding + 'px',
		paddingRight: FieldItem.value?.options.rightPadding + 'px',
		paddingBottom: FieldItem.value?.options.bottomPadding + 'px',
	};
});

defineExpose({ init });
</script>

<style lang="scss" scoped></style>
